<template>
    <view>
        <view class="form-card">
            <view class="form-item">
                <view class="item-label u-flex u-col-center">
                    <text class="label-text u-font-28 u-color-title">{{title}}</text>
                </view>
                <view class="textarea-container u-margin-top-20">
                    <textarea class="evaluate-textarea u-font-28" v-model="content" :maxlength="limit"
                        :placeholder="placeholder" placeholder-class="placeholder-style" @input="onInput" />
                    <view class="word-count u-font-24 u-color-tip">
                        {{content.length}}/{{limit}}
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    /**
     * 长文本
     * @description 此组件一般用于长文本输入。
     * @tutorial https://www.dfer.site
     * @property {String} title 标题
     * @event {Function} @clickHandler 选择单选按钮会触发此事件
     * @example <dfer-textarea @inputHandler="handleInput" title="评价内容" placeholder="请输入您的评价内容，我们将认真听取您的意见建议..." />
     */
    export default {
        name: "dfer-textarea",
        data() {
            return {
                content: ''
            };
        },
        props: {
            title: {
                type: String,
                default () {
                    return "长文本"
                }
            },
            placeholder: {
                type: String,
                default () {
                    return "请输入内容..."
                }
            },
            limit: {
                type: Number,
                default () {
                    return -1
                }
            },
        },
        watch: {},
        created() {},
        methods: {
            onInput(e) {
                // console.log(e);
                this.$emit('inputHandler', e.detail.value);
            }
        }
    }
</script>

<style lang="scss">
    /* 表单 */
    .form-card {
        background: #ffffff;
        margin: 20rpx;
        border-radius: 16rpx;
        box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.04);
        padding: 30rpx;

        .form-item {
            margin-bottom: 10rpx;

            .item-label {
                margin-bottom: 20rpx;
            }

            .label-text {
                font-weight: 500;
                color: #1a1a1a;
            }

            /* 文本域样式 */
            .textarea-container {
                position: relative;
                background: #f8f9fa;
                border-radius: 12rpx;
                padding: 24rpx;
                border: 2rpx solid #e8e8e8;

                .evaluate-textarea {
                    width: 100%;
                    min-height: 200rpx;
                    line-height: 1.6;
                    color: #333;
                }

                .placeholder-style {
                    color: #999;
                    font-size: 28rpx;
                }

                .word-count {
                    text-align: right;
                    margin-top: 16rpx;
                    color: #999;
                }
            }


        }
    }
</style>